<div class="matrix-farm" fxLayout="row" *ngIf="matrixFarm?.isChecked ">
  <aside class="matrix-farm-aside" fxLayoutAlign="center center" *ngIf="matrixFarm?.isChecked">
    {{matrixFarm.farmName}}
  </aside>
  <article class="matrix-farm-article" fxLayout="column" fxFlex="100%">
    <header class="matrix-farm-header" fxLayout="row">
      <div class="matrix-farm-group" fxLayout="row" *ngFor="let stateGroupTotal of matrixFarm.stateGroupTotals">
        <div *ngIf="matrixFarm.stateGroupTotals.length>1&&matrixFarm.stateGroupTotal.isChecked">
          <h4>
            {{stateGroupTotal.groupName}}
          </h4>
        </div>
        <div *ngFor="let stateTotal of stateGroupTotal.stateTotals">
          <div class="matrix-farm-state" [ngStyle]="{'background-color':stateTotal.stateColor}"
               *ngIf="stateTotal.isChecked">
            <span>{{stateTotal.stateName}}</span>
            (<span>{{stateTotal.stateTotal}}</span>)
          </div>
        </div>
      </div>
    </header>
    <div class="fram-content">
      <section class="matrix-farm-section" *ngFor="let devices of matrixFarm.devices;">
        <app-matrix-turbine #matrixTurbine
                            fxFlex="6%"
                            (dblclick)="ondblclick(devices)"
                            [matrixTurbine]="devices"
                            [ngClass]="{no:!devices?.isChecked,hover:true}">
        </app-matrix-turbine>
        <!--</section>-->
      </section>
    </div>
  </article>
</div>
